<template>
  <div class="approval">
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div class="head-title">
        <div class="title">{{$t('approvalDetail.gam')}}</div>
        <div class="info">
          <span>{{$t('approvalDetail.percent')}}:</span>
          <span>{{this.percent}}</span>
        </div>
      </div>
      <el-tabs class="tabs" v-model="activeName2" @tab-click="handleClick">
        <el-tab-pane :label="$t('approvalDetail.maillist')" name="first">
          <div class="menu-search">
            <div class="menu-title">
              <div class="searchItem">
                <span style="width: 90px;">{{$t('approvalDetail.phoneNo')}}</span>
                <el-input
                  v-model="listQuery.phoneNo"
                  :placeholder="$t('rule.phoneNo')"
                  size="small"
                ></el-input>
              </div>
              <div class="searchItem">
                <span>{{$t('approvalDetail.contactName')}}</span>
                <el-input
                  v-model="listQuery.contactName"
                  :placeholder="$t('rule.realName')"
                  size="small"
                ></el-input>
              </div>
              <div class="menu-title-btn">
                <button type="button" @click="search">{{$t('btn.query')}}</button>
                <button type="button" @click="reset">{{$t('btn.reset')}}</button>
              </div>
            </div>
            <el-table
              v-loading="listLoading"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              border
              size="mini"
            >
              <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.num')"
                width="90"
              >
                <template slot-scope="scope">
                  <span>{{scope.row.index}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="contactName"
                :label="$t('approvalDetail.contactName')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="contactPhone"
                :label="$t('approvalDetail.contactPhone')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="contactStatus"
                :label="$t('approvalDetail.contactStatus')"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.contactStatus=== 1">{{$t('approvalDetail.yes')}}</span>
                  <span v-if="scope.row.contactStatus=== 2">{{$t('approvalDetail.no')}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="contactRelation"
                :label="$t('approvalDetail.relation')"
              ></el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listQuery.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="listQuery.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('approvalDetail.calllog')" name="second">
          <div class="menu-search">
            <div class="menu-title">
              <div class="searchItem">
                <span>{{$t('approvalDetail.phoneNo')}}</span>
                <el-input
                  v-model="listQuery1.callUserPhone"
                  :placeholder="$t('rule.phoneNo')"
                  size="small"
                ></el-input>
              </div>
              <div class="searchItem">
                <span>{{$t('approvalDetail.contactName')}}</span>
                <el-input
                  v-model="listQuery1.callUserName"
                  :placeholder="$t('rule.realName')"
                  size="small"
                ></el-input>
              </div>
              <div class="menu-title-btn">
                <button type="button" @click="search2">{{$t('btn.query')}}</button>
                <button type="button" @click="reset2">{{$t('btn.reset')}}</button>
              </div>
            </div>
            <el-table
              v-loading="listLoading1"
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              border
              size="mini"
            >
              <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.num')"
                width="90"
              >
                <template slot-scope="scope">
                  <span>{{scope.row.index}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="callUserName"
                :label="$t('approvalDetail.contactsName')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="callUserPhone"
                :label="$t('approvalDetail.phoneNo')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="callStatus"
                :label="$t('approvalDetail.callStartTime')"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.callStatus=== '1'">{{$t('approvalDetail.call')}}</span>
                  <span v-if="scope.row.callStatus=== '2'">{{$t('approvalDetail.oncall')}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="callStatus"
                :label="$t('approvalDetail.callStatus')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="callTime"
                :label="$t('approvalDetail.callTime')"
              ></el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="listQuery1.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="listQuery1.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total1"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('approvalDetail.smslog')" name="third">
          <div class="menu-search">
            <el-table
              :row-class-name="smsRowClass"
              v-loading="listLoading2"
              ref="multipleTable"
              :data="tableData2"
              tooltip-effect="dark"
              border
              size="mini"
            >
              <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.num')"
                width="90"
              >
                <template slot-scope="scope">
                  <span>{{scope.row.index}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="smsUserName"
                :label="$t('approvalDetail.contactsName')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="smsUserPhone"
                :label="$t('approvalDetail.phoneNo')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="smsStatus"
                :label="$t('approvalDetail.smsStatus')"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.smsStatus=== '2'">{{$t('approvalDetail.send')}}</span>
                  <span v-if="scope.row.smsStatus=== '1'">{{$t('approvalDetail.receive')}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="smsCrtTime"
                :label="$t('approvalDetail.smsCrtTime')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="smsContent"
                :label="$t('approvalDetail.smsContent')"
                fixed="right"
              ></el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="listQuery2.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="listQuery2.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('approvalDetail.top')" name="fourth">
          <el-row>
            <el-col :span="12">
              <div style="margin-right: 5px;">
                <div class="topname">{{$t('approvalDetail.calllog')}}</div>
                <el-table
                  v-loading="listLoading3"
                  ref="multipleTable"
                  :data="tableData3.slice((listQuery3.page-1)*listQuery3.limit,listQuery3.page*listQuery3.limit)"
                  tooltip-effect="dark"
                  border
                  size="mini"
                >
                  <el-table-column
                    header-align="center"
                    align="center"
                    :label="$t('approvalDetail.num')"
                    width="90"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.index}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="callUserName"
                    :label="$t('approvalDetail.contactsName')"
                    width="135"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="callUserPhone"
                    :label="$t('approvalDetail.phoneNo')"
                    width="135"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="totalNum"
                    :label="$t('approvalDetail.totalNum')"
                    width="145"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="totalCallTime"
                    :label="$t('approvalDetail.totalCallTime')"
                    width="135"
                  ></el-table-column>
                </el-table>
                <div class="pagination-container">
                  <el-pagination
                    @size-change="handleSizeChange3"
                    @current-change="handleCurrentChange3"
                    :current-page="listQuery3.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="listQuery3.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData3.length"
                  ></el-pagination>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="margin-left: 5px;">
                <div class="topname">{{$t('approvalDetail.smslog')}}</div>
                <el-table
                  v-loading="listLoading4"
                  ref="multipleTable"
                  :data="tableData4.slice((listQuery4.page-1)*listQuery4.limit,listQuery4.page*listQuery4.limit)"
                  tooltip-effect="dark"
                  border
                  size="mini"
                >
                  <el-table-column
                    header-align="center"
                    align="center"
                    :label="$t('approvalDetail.num')"
                    width="90"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.index}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="smsUserName"
                    :label="$t('approvalDetail.contactsName')"
                    width="130"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="smsUserPhone"
                    :label="$t('approvalDetail.phoneNo')"
                    width="130"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="totalNum"
                    :label="$t('approvalDetail.smstotalNum')"
                    width="130"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="sendNum"
                    :label="$t('approvalDetail.sendNum')"
                    width="145"
                  ></el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="getNum"
                    :label="$t('approvalDetail.getNum')"
                    width="130"
                  ></el-table-column>
                </el-table>
                <div class="pagination-container">
                  <el-pagination
                    @size-change="handleSizeChange4"
                    @current-change="handleCurrentChange4"
                    :current-page="listQuery4.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="listQuery4.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData4.length"
                  ></el-pagination>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="$t('approvalDetail.gamapp')" name="fifth">
          <div class="menu-search">
            <el-table
              :row-class-name="APPRowClass"
              v-loading="listLoading5"
              ref="multipleTable"
              :data="tableData5"
              tooltip-effect="dark"
              border
              size="mini"
            >
              <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.num')"
                width="90"
              >
                <template slot-scope="scope">
                  <span>{{scope.row.index}}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="appName"
                :label="$t('approvalDetail.names')"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="type"
                :label="$t('approvalDetail.type')"
              ></el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                @size-change="handleSizeChange5"
                @current-change="handleCurrentChange5"
                :current-page="listQuery5.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="listQuery5.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total5"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getPercent } from "api/trust/firstApprDetails/index";
import {
  addressPage,
  callPage,
  smsInfoPage,
  top20Call,
  top20Sms,
  appPage
} from "api/trust/addressList/index";
export default {
  data() {
    return {
      listObj: {},
      lanStatus: null,
      percent: "",
      activeName2: "first",
      listLoading: true,
      listLoading1: true,
      listLoading2: true,
      listLoading3: true,
      listLoading4: true,
      listLoading5: true,
      listQuery: {
        channel: "",
        userId: undefined,
        contactName: "",
        phoneNo: "",
        limit: 5,
        page: 1
      },
      total: null,
      listQuery1: {
        channel: "",
        userId: undefined,
        callUserName: "",
        callUserPhone: "",
        limit: 5,
        page: 1
      },
      total1: null,
      listQuery2: {
        channel: "",
        userId: undefined,
        smsUserName: "",
        smsUserPhone: "",
        limit: 5,
        page: 1
      },
      total2: null,
      listQuery3: {
        channel: "",
        page: 1,
        limit: 5
      },
      total3: null,
      listQuery4: {
        channel: "",
        page: 1,
        limit: 5
      },
      total4: null,
      listQuery5: {
        channel: "",
        userId: undefined,
        appName: "",
        limit: 5,
        page: 1
      },
      total5: null,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: []
    };
  },
  computed: {
    ...mapGetters(["elements", "language", "firstApprDetails"])
  },
  created() {
    this.getParamsDetail();
    if (this.language === "zh") {
      this.lanStatus = 1;
    } else if (this.language === "en") {
      this.lanStatus = 2;
    } else {
      this.lanStatus = 3;
    }
    this.getList();
    //top20占比
    let percents = {};
    percents.userId = this.listObj.userId;
    percents.channel = this.listObj.channel;
    percents.uuid = this.listObj.addressBookUuid;
    getPercent(percents).then(response => {
      this.percent = response.data.percent;
    });
  },
  methods: {
    getParamsDetail() {
      this.listObj = this.firstApprDetails;
    },
    APPRowClass(row) {
      if (row.row.hit === 1) {
        return "warning-row";
      } else {
        return "";
      }
    },
    //短信记录和APP关键字标红
    smsRowClass(row) {
      if (row.row.hit === 1) {
        return "warning-row";
      } else {
        return "";
      }
    },
    handleClick(tab, event) {
      if (tab.label === this.$t("approvalDetail.calllog")) {
        this.getList1();
      } else if (tab.label === this.$t("approvalDetail.smslog")) {
        this.getList2();
      } else if (tab.label === this.$t("approvalDetail.top")) {
        this.getList3();
        this.getList4();
      } else if (tab.label === this.$t("approvalDetail.gamapp")) {
        this.getList5();
      }
    },
    getList() {
      //通话录
      this.listQuery.userId = this.listObj.userId;
      this.listQuery.channel = this.listObj.channel;
      this.listQuery.uuid = this.listObj.addressBookUuid;
      addressPage(this.listQuery).then(response => {
        if (response.status === 200) {
          this.listLoading = false;
          this.tableData = response.data.rows;
          this.tableData.forEach(item => {
            item.realName = this.listObj.realName;
          });
          this.tableData.forEach((item, index) => {
            item.index =
              index + (this.listQuery.page - 1) * this.listQuery.limit + 1;
          });
          this.total = Number(response.data.total);
        } else {
          this.listLoading = true;
        }
      });
    },
    getList1() {
      //通话记录
      this.listQuery1.userId = this.listObj.userId;
      this.listQuery1.channel = this.listObj.channel;
      this.listQuery1.uuid = this.listObj.addressBookUuid;
      callPage(this.listQuery1).then(response => {
        if (response.status === 200) {
          this.listLoading1 = false;
          this.tableData1 = response.data.rows;
          this.tableData1.forEach((item, index) => {
            item.index =
              index + (this.listQuery1.page - 1) * this.listQuery1.limit + 1;
          });
          this.total1 = Number(response.data.total);
        } else {
          this.listLoading1 = true;
        }
      });
    },
    getList2() {
      //短信记录
      this.listQuery2.userId = this.listObj.userId;
      this.listQuery2.channel = this.listObj.channel;
      this.listQuery2.uuid = this.listObj.addressBookUuid;
      smsInfoPage(this.listQuery2).then(response => {
        if (response.status === 200) {
          this.listLoading2 = false;
          this.tableData2 = response.data.rows;
          this.tableData2.forEach((item, index) => {
            item.index =
              index + (this.listQuery2.page - 1) * this.listQuery2.limit + 1;
          });
          this.total2 = Number(response.data.total);
        } else {
          this.listLoading2 = true;
        }
      });
    },
    getList3() {
      //通话top
      let obj = {};
      obj.userId = this.listObj.userId;
      obj.channel = this.listObj.channel;
      obj.uuid = this.listObj.addressBookUuid;
      top20Call(obj).then(response => {
        if (response.status === 200) {
          this.listLoading3 = false;
          this.tableData3 = response.data;
          this.tableData3.forEach((item, index) => {
            item.index =
              index + (this.listQuery3.page - 1) * this.listQuery3.limit + 1;
          });
        } else {
          this.listLoading3 = true;
        }
      });
    },
    getList4() {
      //短信top
      let obj1 = {};
      obj1.userId = this.listObj.userId;
      obj1.channel = this.listObj.channel;
      obj1.uuid = this.listObj.addressBookUuid;
      top20Sms(obj1).then(response => {
        if (response.status === 200) {
          this.listLoading4 = false;
          this.tableData4 = response.data;
          this.tableData4.forEach((item, index) => {
            item.index =
              index + (this.listQuery4.page - 1) * this.listQuery4.limit + 1;
          });
        } else {
          this.listLoading4 = true;
        }
      });
    },
    getList5() {
      //APP
      this.listQuery5.userId = this.listObj.userId;
      this.listQuery5.channel = this.listObj.channel;
      this.listQuery5.uuid = this.listObj.userUUID;
      appPage(this.listQuery5).then(response => {
        if (response.status === 200) {
          this.listLoading5 = false;
          this.tableData5 = response.data.rows;
          this.tableData5.forEach((item, index) => {
            item.index =
              index + (this.listQuery5.page - 1) * this.listQuery5.limit + 1;
          });
          this.total5 = Number(response.data.total);
        } else {
          this.listLoading5 = true;
        }
      });
    },
    //重置
    reset() {
      this.listQuery.limit = 5;
      this.listQuery.page = 1;
      this.listQuery.phoneNo = "";
      this.listQuery.contactName = "";
    },
    //查询
    search() {
      this.listQuery.page = 1;
      this.getList();
    },
    //通话记录重置
    reset2() {
      this.listQuery1.callUserPhone = "";
      this.listQuery1.callUserName = "";
    },
    //通话记录查询
    search2() {
      this.listQuery1.page = 1;
      this.getList1();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleSizeChange1(val) {
      this.listQuery1.limit = val;
      this.getList1();
    },
    handleCurrentChange1(val) {
      this.listQuery1.page = val;
      this.getList1();
    },
    handleSizeChange2(val) {
      this.listQuery2.limit = val;
      this.getList2();
    },
    handleCurrentChange2(val) {
      this.listQuery2.page = val;
      this.getList2();
    },
    handleSizeChange3(val) {
      this.listQuery3.limit = val;
    },
    handleCurrentChange3(val) {
      this.listQuery3.page = val;
    },
    handleSizeChange4(val) {
      this.listQuery4.limit = val;
    },
    handleCurrentChange4(val) {
      this.listQuery4.page = val;
    },
    handleSizeChange5(val) {
      this.listQuery5.limit = val;
      this.getList5();
    },
    handleCurrentChange5(val) {
      this.listQuery5.page = val;
      this.getList5();
    }
  }
};
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
  font-size: 12px;
}
.approval-detail {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
}
.title {
  line-height: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.head-title {
  display: flex;
  line-height: 22px;
  .info {
    line-height: 28px;
    border: 1px solid #333;
    margin-left: 20px;
    font-size: 12px;
    border-radius: 5px;
    padding: 0 8px;
  }
}
.menu-title {
  height: 40px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  & > div {
    display: flex;
    align-items: center;
    font-size: 15px;
    span {
      width: 50%;
      padding-right: 10px;
      text-align: right;
    }
  }
  .searchItem {
    display: flex;
    justify-content: space-center;
    margin-right: 20px;
    span {
      display: inline-block;
      width: 100px;
      text-align: left;
      font-size: 12px;
      font-weight: bold;
    }
    div:nth-child(2) {
      width: 190px;
    }
  }
  .menu-title-btn {
    button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
      &:nth-child(1) {
        margin-left: 0;
      }
      &:nth-child(2) {
        background: #ebf5ff;
        color: #20a0ff;
        border: 1px solid #abd5ff;
      }
    }
  }
}
.pagination-container {
  width: 100%;
  margin-left: -12px;
}
.topname {
  margin-bottom: 20px;
  font-weight: bold;
}
.addressList {
  width: 800px;
}
.tabs {
  margin-left: 12px;
}
</style>